Learn how to create a to do list(ToDo List) using HTML and CSS without JavaScript. This step-by-step guide will show you how to make a pure CSS to do list.
Table of Contents
A to-do list is a simple web page element that allows users to input and manage a list of tasks or items. It is a practical and straightforward way to organize tasks, as well as a good exercise for practicing HTML and CSS skills. A to-do list created using only HTML and CSS, without the use of JavaScript or other programming languages, is often referred to as a "pure CSS to-do list." This approach results in a lightweight and fast-loading web page element that can be easily styled to match any website or application design.
With the help of To Do list, we can add a list of tasks that we need to get done in the future. Traditionally, they were written on paper or slag. Today, however, people are using technology to quickly note down their important tasks to set reminders for the upcoming time.
Let's start making an amazing To Do list /ToDo List using HTML and Pure CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our To-Do list.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Here's a breakdown of the HTML Code:
Document Type and HTML Element:
<!DOCTYPE html> <html lang="en">
<!DOCTYPE html>specifies that this is an HTML5 document.<html lang="en">defines the root of the document and specifies the language as English.
Head Section:
<head> <title>ToDo List</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" href="styles.css" /> </head>
<title>ToDo List</title>sets the title of the web page, which appears in the browser tab.<meta charset="UTF-8" />ensures the document uses UTF-8 character encoding.<meta name="viewport" content="width=device-width" />makes the page responsive by setting the viewport width to the device's width.<link rel="stylesheet" href="styles.css" />links to an external CSS file (styles.css) for styling.
Body Section:
<body>
<form>
<fieldset class="todo-list">
<legend class="todo-list__title">Todo List</legend>
...
</fieldset>
</form>
</body>
<form>creates a form container, though no form-specific attributes are used.<fieldset class="todo-list">groups the form elements together and applies the class todo-list for styling.<legend class="todo-list__title">Todo List</legend>provides a title for the fieldset, styled with the class todo-list__title.
Todo Items:
<label class="todo-list__label"> <input type="checkbox" name="" id="" /> <i class="check"></i> <span>Attend meeting</span> </label>
- Each
<label>element wraps a checkbox input and text, styled with todo-list__label. <input type="checkbox" />represents a checkbox that users can check or uncheck.<i class="check"></i>is an empty<i>element with a class check, used for styling purposes or custom icons.<span>Attend meeting</span>displays the text for the todo item.
This is the basic structure of our To-Do list using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the To-Do list is in place, the next step is to add styling to the list using CSS. CSS allows us to control the visual appearance of the To-Do list, including things like layout, color, and typography.
Next, we will create our CSS file. We will use some basic CSS rules in this file to create our to-do list. We will also add some padding and margin properties to ensure that everything looks correct.
Here's a breakdown of each section:
Import Google Font:
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
- This imports the Lato font family from Google Fonts, with weights 400 (regular), 400i (italic), and 700 (bold).
Body Styles:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #9e96df;
}
- Centers the content of the page both horizontally and vertically using Flexbox.
- Sets the height to 100% of the viewport height (100vh).
- Applies a light purple background color (#9e96df).
Todo List Container:
.todo-list {
display: flex;
flex-direction: column;
padding: 0 75px 10px 30px;
background: #162740;
border: transparent;
}
- Uses Flexbox to layout child elements in a column.
- Adds padding to the container.
- Sets a dark blue background (#162740).
Title Styling:
.todo-list .todo-list__title {
padding: 3px 6px;
color: #f1faee;
background-color: #264456;
}
- Adds padding to the title.
- Sets the text color to a light color (#f1faee).
- Applies a slightly lighter blue background color (#264456).
Todo Item Labels:
.todo-list .todo-list__label {
display: flex;
align-items: center;
margin: 40px 0;
font-size: 24px;
font-family: Lato, sans-serif;
color: #f1faee;
cursor: pointer;
}
- Uses Flexbox to align items in the center.
- Adds vertical margins.
- Sets the font size and family.
- Applies a light text color and changes the cursor to a pointer.
Checkbox Styling:
.todo-list .todo-list__label input[type=checkbox] {
opacity: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
- Hides the default checkbox appearance.
Custom Checkbox Design:
.todo-list .todo-list__label input[type=checkbox] + .check {
position: absolute;
width: 25px;
height: 25px;
border: 2px solid #f1faee;
transition: 0.2s;
}
.todo-list .todo-list__label input[type=checkbox]:checked + .check {
width: 25px;
height: 15px;
border-top: transparent;
border-right: transparent;
transform: rotate(-45deg);
}
- .check styles the custom checkbox, positioned absolutely and with a border.
- When the checkbox is checked, it transforms into a checkmark shape.
Label Text and Checkmark Animation:
.todo-list .todo-list__label input[type=checkbox] ~ span {
position: relative;
left: 40px;
white-space: nowrap;
transition: 0.5s;
}
.todo-list .todo-list__label input[type=checkbox] ~ span::before {
position: absolute;
content: "";
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #f1faee;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.todo-list .todo-list__label input[type=checkbox]:checked ~ span {
color: #585b57;
}
.todo-list .todo-list__label input[type=checkbox]:checked ~ span::before {
transform: scaleX(1);
transform-origin: left;
}
- Positions the label text and creates a sliding underline effect.
- Changes the text color when checked.
- Animates the underline to expand when checked.
This will give our to-do list an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #9e96df;
}
.todo-list {
display: flex;
flex-direction: column;
padding: 0 75px 10px 30px;
background: #162740;
border: transparent;
}
.todo-list .todo-list__title {
padding: 3px 6px;
color: #f1faee;
background-color: #264456;
}
.todo-list .todo-list__label {
display: flex;
align-items: center;
margin: 40px 0;
font-size: 24px;
font-family: Lato, sans-serif;
color: #f1faee;
cursor: pointer;
}
.todo-list .todo-list__label input[type=checkbox] {
opacity: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.todo-list .todo-list__label input[type=checkbox] + .check {
position: absolute;
width: 25px;
height: 25px;
border: 2px solid #f1faee;
transition: 0.2s;
}
.todo-list .todo-list__label input[type=checkbox]:checked + .check {
width: 25px;
height: 15px;
border-top: transparent;
border-right: transparent;
transform: rotate(-45deg);
}
.todo-list .todo-list__label input[type=checkbox] ~ span {
position: relative;
left: 40px;
white-space: nowrap;
transition: 0.5s;
}
.todo-list .todo-list__label input[type=checkbox] ~ span::before {
position: absolute;
content: "";
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #f1faee;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.todo-list .todo-list__label input[type=checkbox]:checked ~ span {
color: #585b57;
}
.todo-list .todo-list__label input[type=checkbox]:checked ~ span::before {
transform: scaleX(1);
transform-origin: left;
} Final Output:
Conclusion:
In this post, we learned how to create a pure CSS to-do list using HTML and CSS. We started by setting up the HTML structure of the to-do list, then added CSS styles to customize the design of the list. We also added interactivity to the list using CSS hover effects and transitions.
By following this step-by-step tutorial, you can create your own custom to-do list with ease. This is a great project for beginners in web development who want to practice their HTML and CSS skills.
If you want to learn more about HTML and CSS, there are many online resources available to help you improve your skills. You can also practice building different types of projects, such as a blog or a portfolio website, to further develop your skills.
We hope you found this tutorial helpful and informative. If you have any questions or feedback, please feel free to leave a comment below.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
